<template>
  <div>
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍的n值是 <span v-b="n"></span></h2>
    <button @click="n++">点击n+1</button>
    <button @click="jia">加一下</button>
    <input type="text" v-num:value="zhi" v-model="zhi" />
    <h1>vue过滤器</h1>
    <p>价格:{{ price | guolv1 }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      n: 1,
      s: 2,
      price: 50,
      zhi: "",
    };
  },
  filters: {
    guolv1(value) {
      // console.log(value);
      return value;
    },
  },
  methods: {
    jia() {
      this.s++;
      console.log(this.s);
    },
  },
  directives: {
    b(a, b) {
      // 第一个参数是元素  第二个参数是 元素与这个自定义事件之间的关联
      // 1. 当元素与指令成功绑定时会被调用
      // 2. 指令所在的模板被重新解析时
      //   console.log(a.innerText);
      a.innerText = b.value * 10;
      // console.log("big");
      //   console.log(b.value);
    },
    // fbind(a, b) {
    //   a.value = b.value * 20;
    //   a.focus()
    // },
    // fbind: {
    //   // 指令与元素成功绑定 （一上来）
    //   bind(a, b, c) {
    //     console.log("bind");
    //     console.log(a, b, c);
    //     a.value = b.value;
    //   },
    //   // 指令所在被插入页面时
    //   inserted(a, b, c) {
    //     console.log("inserted");
    //     console.log(a, b, c);
    //     a.focus();
    //   },
    //   // 指令所再
    //   update(a, b, c) {
    //     a.focus();
    //     console.log("update"); // 数据更新
    //     a.value = b.value;
    //     console.log(a, b, c);
    //   },
    // },
    num: {
      bind(a) {},
      inserted(a) {},
      update(a, b, c) {
        a.oninput = function () {
          if (Boolean(Number(a.value)) == false) {
            a.value = a.value.slice(0, -1);
          }
        };
      },
    },
  },
};
</script>
<style scoped>
</style>